package edu.mit.media.fv.layers
{
	import edu.mit.media.fv.blocks.*;
	import edu.mit.media.fv.components.*;
	import edu.mit.media.fv.events.*;
	import edu.mit.media.fv.fluidspace.*;
	import edu.mit.media.fv.icons.*;
	import edu.mit.media.fv.view.*;
	
	import flash.display.*;
	import flash.events.*;
	import flash.filters.*;
	import flash.geom.Rectangle;
	import flash.text.*;
	import flash.display.DisplayObject;
	import flash.display.GradientType;
	import flash.display.InterpolationMethod;
	import flash.display.SpreadMethod;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	import flash.text.*;
	import flash.filters.*;
	
	public class ScrollableLayer extends Layer
	{
		private var _viewport:Sprite;
		private var _thumb:Sprite;
		private var _isPressed:Boolean = false;
		private var _mask:Sprite;
		
		public function ScrollableLayer(x:int=0, y:int=0, width:int=650, height:int=100, icon:DisplayObject = null)
		{
			super(x, y, width, height,icon);
			
			this._wall = new Sprite();
			//this._wall.filters = [filter];
			this.addChild(this._wall);
			
			var format:TextFormat = new TextFormat();
			format.align = TextFormatAlign.LEFT;
			format.bold = true;
			format.font = "Arial";
			format.size = 12;
			format.color = 0x000000;
			this._label = new TextField();
			this._label.defaultTextFormat = format;
			this._label.type = TextFieldType.DYNAMIC;
			this._label.selectable = false;
			this._label.x = MARGIN;
			this._label.y = MARGIN;
			this._label.width = width;
			this._label.height = HEADER_HEIGHT-MARGIN*2;
			this.addChild(this._label);
			
			this._thumb = new Sprite();
			this.addChild(this._thumb);
			
			if(icon != null){
				this.addChild(icon);
			}
			
			this._canvas = new Sprite();
			this._canvas.x = MARGIN;
			this._canvas.y = MARGIN;
			this.addChild(this._canvas);
			
			
			
			this._viewport = new Sprite();
			this._canvas.addChild(this._viewport);
			
			this._viewbounds = new Rectangle();
			
			
			this._mask = new Sprite();
			this._canvas.addChild(_mask);
			this._canvas.mask = _mask;
			
			this._thumb.addEventListener(MouseEvent.MOUSE_DOWN, thumbPressed);
			this._thumb.addEventListener(MouseEvent.MOUSE_MOVE, thumbDragged);
			this.addEventListener(MouseEvent.ROLL_OUT, thumbReleased);
			this.addEventListener(MouseEvent.MOUSE_UP, thumbReleased);
		}
		public override function reform():void{
			this._viewbounds = new Rectangle(
				MARGIN, MARGIN,
				this.layerWidth-MARGIN*3-ICON_WIDTH, this.layerHeight-MARGIN*3-HEADER_HEIGHT);
			
			this._wall.graphics.clear();
			this._wall.graphics.beginFill(this.backgroundColor, 0.75);
			this._wall.graphics.drawRoundRect(0, 0, this.layerWidth, this.layerHeight, MARGIN, MARGIN);
			this._wall.graphics.endFill();
			this._wall.graphics.beginFill(this.backgroundColor, 0.90);
			this._wall.graphics.drawRoundRect(0,0,this.layerWidth, this.layerHeight, MARGIN, MARGIN);
			this._wall.graphics.drawRect(_viewbounds.x, _viewbounds.y, _viewbounds.width, _viewbounds.height);
			this._wall.graphics.drawRoundRect(
				_viewbounds.x, this.layerHeight-MARGIN-HEADER_HEIGHT,
				_viewbounds.width, HEADER_HEIGHT,
				MARGIN, MARGIN);
			this._wall.graphics.endFill();
			
			_mask.graphics.clear();
			_mask.graphics.beginFill(0xFFFFFF);
			_mask.graphics.drawRect(0,0, _viewbounds.width, _viewbounds.height);
			_mask.graphics.endFill();
			
			
			if(this._icon != null){
				this._icon.width = ICON_WIDTH;
				this._icon.height = ICON_WIDTH;
				this._icon.x = _viewbounds.x+_viewbounds.width+MARGIN;
				this._icon.y = 0;
			}
			this._label.x = _viewbounds.x+_viewbounds.width+MARGIN;
			this._label.y = ICON_WIDTH;
			
			this.reformThumb();
			
		}
		
		private function reformThumb():void{
			var type:String = GradientType.LINEAR;
			var colors:Array = [0xFFFFFF, 0x000000];
			var alphas:Array = [1, 1];
			var ratios:Array = [0, 255];
			var matrix:Matrix = new Matrix();
			var boxWidth:Number = 100;
			var boxHeight:Number = 100
			var boxRotation:Number = Math.PI/2; // 90˚
			var tx:Number = 100;
			var ty:Number = 100;
			matrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);
			
			if(this._viewport.width == 0){
				var thumbWidth:int = this._viewbounds.width;
			}else{
				thumbWidth = Math.max(_viewbounds.width, _viewbounds.width*2/Number(_viewport.width));
			}
			this._thumb.graphics.beginGradientFill(type, colors, alphas, ratios, matrix);
			this._thumb.graphics.drawRoundRect(0,0,thumbWidth, HEADER_HEIGHT,HEADER_HEIGHT, HEADER_HEIGHT);
			this._thumb.graphics.endFill();
			this._thumb.y = this.layerHeight-MARGIN-HEADER_HEIGHT;
			this._thumb.x = MARGIN;
		}
		
		
		private function thumbPressed(event:MouseEvent):void{
			_isPressed = true;
			var bounds:Rectangle = new Rectangle(
				MARGIN, this.layerHeight-MARGIN-HEADER_HEIGHT,
				this.layerWidth-MARGIN*2-this._thumb.width, 0);
			this._thumb.startDrag(false, bounds);
		}		
		private function thumbReleased(event:MouseEvent):void{
			if(_isPressed){
				_isPressed = false;
				this._thumb.stopDrag();
			}
			
		}
		private function thumbDragged(event:MouseEvent = null):void{
			if (_isPressed){
				var offset:Number = this._thumb.x - MARGIN;
				var newY:Number = (offset*this._viewport.width)/this._viewbounds.width;
				this._viewport.y = -newY;
			}
		}		
		
		public override function addBlock(block:Block):void{
			super.addBlock(block);
			if(block == null){ return;}
			this._viewport.addChild(block);
			block.y = 2;
			block.diameter = this._viewbounds.height;
		}
		public function reorderBlocks():void{
			var max:int = 0;
			for (var i:int = 0; i<this._blocks.length; i++){
				var block:Block = Block(this._blocks[i]);
				block.x = max;
				max = max+block.diameter;
			}
		}
	}
}